<template>
  <div :class="[$store.state.appPrefix + '-c-volume-box']">
    <div class="block" v-for="(item, index) in blockList" :key="index" :class="{ active: item }"></div>
  </div>
</template>

<script>

export default {
  props: {
    // 0-100
    volume: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      blockList: [false, false, false, false, false, false, false, false, false, false]
    }
  },
  watch: {
    volume: {
      handler(newVolume) {
        this.updateBlockList(newVolume);
      },
      immediate: true
    }
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    updateBlockList(volume) {
      // 确保volume在0-100范围内
      const normalizedVolume = Math.max(0, Math.min(100, volume));

      // 计算需要激活的block数量（10个block对应0-100的音量）
      const activeCount = Math.ceil((normalizedVolume / 100) * this.blockList.length);

      // 更新blockList状态，倒叙
      this.blockList = this.blockList.map((_, index) => index >= this.blockList.length - activeCount);
    }
  }
}
</script>
